<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万元</h2>
    <button @click="changeCarBrand">修改汽车的品牌</button>
    <button @click="changeCarPrice">修改汽车的价格</button>
    <button @click="changeCar">修改汽车</button>

    <hr>
    <h2>当前求和为： {{sum}}</h2>
    <button @click="changeSum">点我sum加1</button>

  </div>

</template>

<script setup lang="ts" name="Person">
/*
宏观角度看:
1. `ref`用来定义：基本类型数据、对象类型数据；
2. `reactive`用来定义：对象类型数据
区别:
1.`ref`创建的变量必须使用`.value`（可以使用`volar`插件自动添加`.value`）。
2.`reactive`重新分配一个新对象，会失去响应式（可以使用`Object.assign`去整体替换）
- 使用原则：
1. 若需要一个基本类型的响应式数据，必须使用`ref`。
2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。
3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`。
 */
import {reactive, ref} from "vue";
//数据
let car = reactive({brand: '大众', price: 100})
let sum = ref(0)


console.log(car) // ref底层 的value 也是通过 reactive 实现的
function changeCarPrice() {
  car.price += 10
  console.log(car.price)
}


function changeCarBrand() {
  car.brand = '宝马'
  console.log(car.brand)
}

function changeCar() {
  // car = {brand: 'BYD', price: 20} 页面不更新
  // car = reactive({brand: 'BYD', price: 20}） 页面不更新
  Object.assign(car, {brand: 'BYD', price: 20}) // 页面更新

}

function changeSum() {
  sum.value += 1
}



</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>